<template>
  <div class="ques">
    <p class="q-cont">{{quesData.totalSort ? quesData.totalSort + '.' : ''}}<span v-html="quesData.questionContent"></span>{{quesData.score ? '（' + quesData.score + '分）' : ''}}</p>
    <div class="q-a-area">
      <el-input v-for="index of quesData.blank" :key="index" :placeholder="!showAnswer ? '请在这里输入答案' : ''" v-model="completionList[index - 1]" @input="handleContentInput" :readonly="showAnswer">
        <template #prepend>
          <span>{{index}}</span>
        </template>
      </el-input>
    </div>
    <div class="answer-area" v-if="showAnswer">
      <dl>
        <dt>答案：</dt>
        <dd>
          <p v-for="index of quesData.blank" :key="index">{{index}}.{{rightAnswer[index - 1]}}</p>
        </dd>
      </dl>
      <dl>
        <dt>得分：</dt>
        <dd>{{quesData.studentScore}}</dd>
      </dl>
      <dl>
        <dt>解析：</dt>
        <dd>{{quesData.analysis ? quesData.analysis : '略'}}</dd>
      </dl>
    </div>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';

@Options({
  props: {
    onChange: Function,
    quesData: Object,
    showAnswer: Boolean
  },
  watch: {
    quesData() {
      this.completionList = [];
    }
  }
})
export default class Completion extends Vue {
  quesData: ObjectT = {};
  onChange!: (type: number, totalSort: number, value: string[]) => {};
  showAnswer!: boolean;
  completionList: string[] = [];
  rightAnswer: string[] = [];
  created() {
    if (this.showAnswer) {
      this.completionList = this.quesData.studentAnswer ? this.quesData.studentAnswer.split('|') : [];
    } else {
      this.completionList = this.quesData.answer ? this.quesData.answer.split('|') : [];
    }
    
    this.rightAnswer = this.quesData.rightAnswer ? this.quesData.rightAnswer.split('|') : [];
  }
  mounted() {
    this.initCompletionList();
  }
  // 初始化填空数据
  initCompletionList() {
    for(let i = 0; i < this.quesData.blank; i++) {
      this.completionList[i] = this.completionList[i] ? this.completionList[i] : '';
    }
  }
  // 处理内容change事件
  handleContentInput() {
    if (this.onChange) {
      this.onChange(3, this.quesData.totalSort, this.completionList);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import './common.scss';
.ques {
  margin-bottom: 64px;
}
.q-cont {
  span {
    p {
      display: inline;
    }
  }
}
.answer-area {
  margin-top: 26px;
}
</style>
<style lang="scss">
.ques {
  img {
    display: inline-block;
    vertical-align: middle;
    max-width: 95%;
  }
}
  .q-a-area {
    @include placeholder($text-placeholder, 16px);
    .el-input-group {
      margin-bottom: 23px;
    }
    .el-input-group__prepend {
      position: relative;
      width: 47px;
      height: 36px;
      padding: 0;
      text-align: center;
      font-size: 16px;
      border-radius: 50%;
      color: #fff;
      border: none;
      background: transparent;
      text-align: left;
      span {
        position: relative;
        display: inline-block;
        width: 25px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        background: $color-primary;
        border-radius: 50%;
      }
    }
    .el-input__inner {
      height: 36px;
      font-size: 16px;
      color: $text-black;
      background: $bg-color-purle;
      border-radius: 5px !important;
      &:focus {
        background: transparent;
      }
    }
  }
  .el-input__inner {
    height: 47px;
    font-size: 22px;
    color: $text-color;
  }
  .answer-area {
    .el-input-group {
      margin-bottom: 10px;
    }
    .el-input-group__prepend {
      width: 43px;
      height: 38px;
      padding: 0;
      text-align: center;
      font-size: 17px;
      color: $text-color;
      background: transparent;
    }
    .el-input__inner {
      width: 247px;
    }
  }
</style>
